<template>
  <div style="padding-left: 6%">
    <el-row :gutter="60">
        <el-col :span="10">
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span>分组</span>
                </div>
                <el-row :gutter="10">
                    <el-col :span="18">
                        <el-input
                        class="mt-1 mb-1"
                        placeholder="请输入内容"
                        prefix-icon="el-icon-search"
                        clearable
                        v-model="searchInputGroup">
                        </el-input>
                    </el-col>
                    <el-col :span="3"><el-button plain style="position:relative;top:3px" @click="getSortData(0,pageSize_sort)">查询</el-button></el-col>
                </el-row>
                <el-table
                    :data="sortData"
                    :show-header="false"
                    style="width: 100%">
                    
                    <el-table-column
                    label="日期">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">
                            <img style="width: 50px; height: 50px;min-height:50px"
                            :src="scope.row.TXTP">
                        </span>
                    </template>
                    </el-table-column>

                    <el-table-column
                    label="姓名">
                    <template slot-scope="scope">
                        <div slot="reference" class="name-wrapper">
                            {{ scope.row.XSMC }}
                        </div>
                    </template>
                    </el-table-column>

                    <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button
                        size="mini"
                        type="danger"
                        @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                    </template>
                    </el-table-column>
                </el-table>
                <div class="block mt-3">
                    <el-pagination
                    @size-change="handleSizeChange_sort"
                    @current-change="handleCurrentChange_sort"
                    :current-page.sync="currentPage_sort"
                    :page-size="pageSize_sort"
                    layout="prev, pager, next, jumper"
                    :total="total_sort">
                    </el-pagination>
                </div>
            </el-card>
        </el-col>

        <el-col :span="10">
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span>加盟商</span>
                </div>
                <el-row :gutter="10">
                    <el-col :span="18">
                        <el-input
                        class="mt-1 mb-1"
                        placeholder="请输入内容"
                        prefix-icon="el-icon-search"
                        clearable
                        v-model="searchInputJMS">
                        </el-input>
                    </el-col>
                    <el-col :span="3"><el-button plain style="position:relative;top:3px" @click="getJMSData(0,pageSize_JMS)">查询</el-button></el-col>
                    
                    <el-table
                    :data="JMSData"
                    :show-header="false"
                    style="width: 100%">
                    
                        <el-table-column
                        label="日期"
                        width="80">
                        <template slot-scope="scope">
                            <span style="margin-left: 10px">
                                <img style="width: 50px; height: 50px;min-height:50px"
                                :src="scope.row.TXTP">
                            </span>
                            
                        </template>
                        </el-table-column>

                        <el-table-column
                        label="姓名"
                        width="180">
                        <template slot-scope="scope">
                            <div slot="reference" class="name-wrapper">
                                {{ scope.row.XSMC }}
                            </div>
                        </template>
                        </el-table-column>

                        <el-table-column label="操作" width="180">
                        <template slot-scope="scope">
                            <el-button
                            size="mini"
                            type="danger"
                            @click="handleAdd(scope.$index, scope.row)">添加</el-button>
                        </template>
                        </el-table-column>
                    </el-table>
                </el-row>
                <div class="block mt-3">
                    <el-pagination
                    @size-change="handleSizeChange_JMS"
                    @current-change="handleCurrentChange_JMS"
                    :current-page.sync="currentPage_JMS"
                    :page-size="pageSize_JMS"
                    layout="prev, pager, next, jumper"
                    :total="total_JMS">
                    </el-pagination>
                </div>
            </el-card>
        </el-col>

    </el-row>
 </div>
</template>

<script>
export default {
    data(){
        return{
            searchInputGroup:'',//查询分组
            searchInputJMS:'',  //查询结盟商
            count:5,
            sortData: [], // 分组数据
            JMSData:[],   // 加盟商数据  
            fzid:{},//接收上个页面(分组页面)传递的参数(分组id)
            
            /* 分类分页 */
            currentPage_sort:1,
            pageSize_sort:5,
            total_sort:10,
            
            /* 加盟商分页  */
            currentPage_JMS:1,
            pageSize_JMS:5,
            total_JMS:10,
        }
    },
    methods:{
       /* 分类分页 */
        handleSizeChange_sort(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange_sort(val) {
            console.log(`当前页: ${val}`);
            this.getSortData((val-1)*this.pageSize_sort,this.pageSize_sort)
        },
        /* 加盟商分页  */
        handleSizeChange_JMS(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange_JMS(val) {
            console.log(`当前页: ${val}`);
            this.getJMSData((val-1)*this.pageSize_JMS,this.pageSize_JMS)
        },

        /* 分组删除 */
        handleDelete(index, row) {
             var that = this
           /*  saveJMSFzRyxx 保存加盟商分组人员信息
                uid   = this.uid
                fzid 分组id  = 
                hyid 加盟商id =
             */
            var params = {}
            params.ACTIONNAME = 'delJMSFzRy';
            params.fzid = that.fzid; //上个页面传过来的分组id,
            params.hyid = row.OBJID;
            
            that.$get(params).then(res => {
                if(res.SUCCESS){
                   /*  that.$message({
                        message: res.MSG,
                        type: 'success',
                        duration:1000
                    }); */
                    that.getSortData(0,this.pageSize_sort)
                    that.getJMSData(0,this.pageSize_JMS)
                }else{
                    that.$message({
                        message: res.MSG,
                        type: 'warning',
                        duration:1000
                    });
                }
            })
        },
        /* 分组添加 */
        handleAdd(index, row) {
            var that = this
           /*  saveJMSFzRyxx 保存加盟商分组人员信息
                uid   = this.uid
                fzid 分组id  = 
                hyid 加盟商id =
             */
            var params = {}
            params.ACTIONNAME = 'saveJMSFzRyxx';
            params.fzid = that.fzid; //上个页面传过来的分组id,
            params.hyid = row.OBJID;
            
            that.$get(params).then(res => {
                if(res.SUCCESS){
                   /*  that.$message({
                        message: res.MSG,
                        type: 'success',
                        duration:1000
                    }); */
                    that.getSortData(0,this.pageSize_sort)
                    that.getJMSData(0,this.pageSize_JMS)
                }else{
                    that.$message({
                        message: res.MSG,
                        type: 'warning',
                        duration:1000
                    });
                }
            })
        },
        /* 获取加盟商数据 */
        async getJMSData(index,count){
            var params = {}
            params.ACTIONNAME = 'getJMSFzRyList1';
            params.index = index;
            params.count = count;
            params.fzid = this.fzid;
            if(this.searchInputJMS!==''){
                 params.keywords = this.searchInputJMS;
            }
            this.$get(params).then(res => {
                console.log(res)
                if(res.SUCCESS){
                    this.JMSData = res.DATA.LIST
                    this.total_JMS = res.DATA.TOTAL;
                }
            })
        },
        /* 获取分组数据 */
        async getSortData(index,count){
            var params = {}
            params.ACTIONNAME = 'getJMSFzRyList';
            params.index = index;
            params.count = count;
            params.fzid = this.fzid;
            if(this.searchInputGroup!==''){
                 params.keywords = this.searchInputGroup;
            }
            this.$get(params).then(res => {
                console.log(res)
                if(res.SUCCESS){
                    this.sortData = res.DATA.LIST
                    this.total_sort = res.DATA.TOTAL;
                }
            })
        },
    },
    created(){
        if(this.$route.params.row){
            //row为上个页面传递的分组的信息
            this.fzid = this.$route.params.row.OBJID
             console.log(this.fzid);
             this.uid = localStorage.uid
            this.getJMSData(0,this.pageSize_JMS)
            this.getSortData(0,this.pageSize_sort)
        }else{
            this.$router.go(-1)
        }
    }
}
</script>

<style scoped>
img{
    border-radius: 50%;
}
</style>